xiangcunwang_web/pages/xiangcunshangcheng/[dir]/qiugou/[id].html.vue

<template>
    <ShopPageHead></ShopPageHead>
    <main class="index_main" id="all_vue">
        <HomeAdvertising :imgurl="adImg1"></HomeAdvertising>
        <ShopSubMenu></ShopSubMenu>
        <!-- 当前位置 -->
        <div class="categ_crumb_box2 clearfix_2 phone_none">

            <div class="categ_crumb_left">
                <span class="categ_crumb_left_a" title=""> 当前位置： </span>
                <NuxtLink
                    :to="`/xiangcunshangcheng/index.html`"
                    class="categ_crumb_left_a"
                >
                    乡村商城
                </NuxtLink>
                &gt;
                <NuxtLink
                    :to="`/xiangcunshangcheng/${targetSegment}/index.html`"
                    class="categ_crumb_left_a"
                >
                    {{name}}
                </NuxtLink>
                &gt;
                <NuxtLink
                    :to="`/xiangcunshangcheng/${targetSegment}/qiugou/list-1.html`"
                    class="categ_crumb_left_a"
                >
                    求购
                </NuxtLink>
                &gt;
                <span class="categ_crumb_left_text">{{shopData.name}}</span>
            </div>
        </div>

        <div class="breadcrumb_box pc_none">
            
            <span class=" ">当前位置：</span>
            
            <NuxtLink
                :to="`/xiangcunshangcheng/index.html`"
                class=" "
                >
                乡村商城
            </NuxtLink>
            <span class=" ">&gt;</span>

            <NuxtLink
                    :to="`/xiangcunshangcheng/${targetSegment}/index.html`"
                    class=" "
            >
                    {{name}}
            </NuxtLink>
            <span class=" ">&gt;</span>

            <NuxtLink
                    :to="`/xiangcunshangcheng/${targetSegment}/gongying/list-1.html`"
                    class=" "
                >
                    求购
            </NuxtLink>
            <span class=" ">&gt;</span>

            <span class="">{{shopData.name}}</span>
            
        </div>
        <div class="supply_1_index_qiugou clearfix">
            <div class="supply_1_index_qiugou_left">
                <img class="supply_1_img" :src="shopImg" :alt="shopData.name">
                <div class="supply_1_right_qiugou">
                    <h4 class="supply_1_h4">{{shopData.name}}</h4>
                    <div class="supply_1_ul_qiugou clearfix">
                        <div class="supply_1_li_qiugou clearfix"><label class="supply_1_li_label">发布日期</label><span
                            class="supply_1_li_text ">{{getTimeText(shopData.created_at)}}</span></div>
                        <div class="supply_1_li_qiugou clearfix"><label class="supply_1_li_label">截止日期</label><span
                            class="supply_1_li_text ">{{getValidityTime(shopData)}}</span></div>
                        <div class="supply_1_li_qiugou clearfix"><label class="supply_1_li_label">浏览次数</label><span
                            class="supply_1_li_text ">{{ shopData.hits }}</span></div>
                        <div class="supply_1_li_qiugou clearfix"><label class="supply_1_li_label">联 系 人</label><span
                            class="supply_1_li_text ">{{ shopData.contact}}</span></div>
                        <div class="supply_1_li_qiugou clearfix"><label class="supply_1_li_label">发布地区</label><span
                            class="supply_1_li_text ">{{ shopData.address }}</span></div>
                        <div class="supply_1_li_qiugou clearfix"><label class="supply_1_li_label">座 机</label><span
                            class="supply_1_li_text ">{{ shopData.landline }}</span></div>
                        <div class="supply_1_li_qiugou clearfix"><label class="supply_1_li_label">联系电话</label><span
                            class="supply_1_li_text ">{{ shopData.phone }}</span></div>
                    </div>
                </div>
            </div>

            <div class="supply_1_index_qiugou_right phone_none">
                <div class="shop_3_right clearfix">
                    <div class="choice_1_box clearfix">
                        <div class="choice_1_btn_box clearfix">
                            <div class="choice_1_btn" 
                                :class="{ choice_1_btn_only: choice_1_num == 1 }"
                                @mouseover="choice_1_num = 1">
                                <span class="choice_1_btn_a">供应商品</span>
                            </div>
                            <div class="choice_1_btn" 
                                :class="{ choice_1_btn_only: choice_1_num == 2 }"
                                @mouseover="choice_1_num = 2">
                                <span class="choice_1_btn_a">求购商品</span>
                            </div>
                        </div>
                        <div class="choice_1_card_box">
                            <div class="shop_ul_img_2 choice_1_card clearfix" v-show="choice_1_num == 1">
                                <div class="shop_li_img_2" v-for="(item,index) in boxData1">
                                    <nuxtLink 
                                        :to="getShopPathDetail1(item)"
                                        class="shop_li_img_2_a"
                                    >
                                        <div class="shop_li_img_2_num"> {{ index + 1 }} </div>
                                        <div class="shop_li_img_2_right clearfix">
                                            <img class="shop_li_img_2_img" :src="item.imgurl" :alt="item.name">
                                            <div class="shop_li_img_2_text">
                                                {{item.name}}
                                            </div>
                                        </div>
                                    </nuxtLink>
                                </div>
                            </div>
                            <div class="shop_ul_img_2 choice_1_card clearfix" v-show="choice_1_num == 2">
                                <div class="shop_li_img_2" v-for="(item,index) in boxData2">
                                    <nuxtLink 
                                        :to="getShopPathDetail1(item)"
                                        class="shop_li_img_2_a"
                                    >
                                        <div class="shop_li_img_2_num"> {{ index + 1 }} </div>
                                        <div class="shop_li_img_2_right clearfix">
                                            <img class="shop_li_img_2_img" :src="item.imgurl" :alt="item.name">
                                            <div class="shop_li_img_2_text">
                                                {{item.name}}
                                            </div>
                                        </div>
                                    </nuxtLink>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>


        <div class="phone_roll_out" v-if="false">

            <div class="phone_roll_box">

                <div class="phone_roll_head">供应商品 </div>


                <div class="phone_roll_ul">

                    <el-carousel :interval="933993" height="28vw" indicator-position="outside" @change="change_fun">
                        
                        <el-carousel-item>
                            <div class="phone_roll_li" v-for="(item,index) in boxData1.slice(0, 2)">
                                    
                                <nuxtLink 
                                        :to="getShopPathDetail1(item)"
                                    class="phone_roll_li_a"
                                >    

                                    <img class="phone_roll_li_img" :src="item.imgurl" title="" alt="">

                                    <div class="phone_roll_ul_li_dot1">
                                        {{ item.name }}
                                            
                                    </div>
                                </nuxtLink>
                            </div>
                        </el-carousel-item>
                            
                        <el-carousel-item>

                            <div class="phone_roll_li" v-for="(item,index) in boxData1.slice(2, 4)">
                                    
                                <nuxtLink 
                                        :to="getShopPathDetail1(item)"
                                    class="phone_roll_li_a"
                                >    

                                    <img class="phone_roll_li_img" :src="item.imgurl" title="" alt="">

                                    <div class="phone_roll_ul_li_dot1">
                                        {{ item.name }}
                                            
                                    </div>
                                </nuxtLink>
                            </div>


                        </el-carousel-item>
                            
                        <el-carousel-item>

                            <div class="phone_roll_li" v-for="(item,index) in boxData1.slice(4,6)">
                                    
                                <nuxtLink 
                                        :to="getShopPathDetail1(item)"
                                    class="phone_roll_li_a"
                                >    

                                    <img class="phone_roll_li_img" :src="item.imgurl" title="" alt="">

                                    <div class="phone_roll_ul_li_dot1">
                                        {{ item.name }}
                                            
                                    </div>
                                </nuxtLink>
                            </div>


                        </el-carousel-item>
                            
                    </el-carousel>    

                </div>

            </div>

            <div class="phone_roll_box">

                <div class="phone_roll_head">求购商品 </div>

                <div class="phone_roll_ul">
                    <el-carousel :interval="933993" height="28vw" indicator-position="outside" @change="change_fun">
                        
                        <el-carousel-item>

                            <div class="phone_roll_li" v-for="(item,index) in boxData2.slice(0, 2)">
                                    
                                <nuxtLink 
                                        :to="getShopPathDetail1(item)"
                                    class="phone_roll_li_a"
                                >    

                                    <img class="phone_roll_li_img" :src="item.imgurl" title="" alt="">

                                    <div class="phone_roll_ul_li_dot1">
                                        {{ item.name }}
                                            
                                    </div>
                                </nuxtLink>
                            </div>
                        </el-carousel-item>
                            
                        <el-carousel-item>

                            <div class="phone_roll_li" v-for="(item,index) in boxData2.slice(2, 4)">
                                    
                                <nuxtLink 
                                        :to="getShopPathDetail1(item)"
                                    class="phone_roll_li_a"
                                >    

                                    <img class="phone_roll_li_img" :src="item.imgurl" title="" alt="">

                                    <div class="phone_roll_ul_li_dot1">
                                        {{ item.name }}
                                            
                                    </div>
                                </nuxtLink>
                            </div>


                        </el-carousel-item>
                            
                        <el-carousel-item>

                            <div class="phone_roll_li" v-for="(item,index) in boxData2.slice(4,6)">
                                    
                                <nuxtLink 
                                        :to="getShopPathDetail1(item)"
                                    class="phone_roll_li_a"
                                >    

                                    <img class="phone_roll_li_img" :src="item.imgurl" title="" alt="">

                                    <div class="phone_roll_ul_li_dot1">
                                        {{ item.name }}
                                            
                                    </div>
                                </nuxtLink>
                            </div>


                        </el-carousel-item>
                            
                    </el-carousel>    

                </div>

            </div>

        </div>

        <div class="supply_2_index clearfix phone_none">

            <div class="supply_head_box clearfix_2">
                <a class="supply_head_a" title="" :class="{ supply_head_a_only: 1 == supply_choice_1_num }"
                    @mouseover="supply_choice_1_num = 1">详情信息</a>
                <a class="supply_head_a" title="" :class="{ supply_head_a_only: 2 == supply_choice_1_num }"
                    @mouseover="supply_choice_1_num = 2">发布人信息</a>
            </div>

            <div class="supply_art_out clearfix">
                <!-- 详情信息 -->
                <div class="supply_art_box" v-show="supply_choice_1_num == 1" v-html="shopData.detail"></div>
                <!-- 发布人信息 -->
                <div class="supply_art_box" v-show="supply_choice_1_num == 2">
                    <p class="supply_art_box_p">公司名称：</p>
                    <p class="supply_art_box_p">电子邮箱：{{shopData.email}}</p>
                    <p class="supply_art_box_p">邮政编码：{{shopData.postal}}</p>
                    <p class="supply_art_box_p">联系地址：{{shopData.address}}</p>
                </div>
            </div>
        </div>

        
        <!-- 手机选项卡 btn phone -->
        <div class="phone_box_1_head pc_none">
                
            <a class="" :class="{ a_choice_only: 1 == supply_choice_1_num }"
                    @mouseover="supply_choice_1_num = 1">详情信息</a>
            <a class="" title="" :class="{ a_choice_only: 2 == supply_choice_1_num }"
                    @mouseover="supply_choice_1_num = 2">发布人信息</a>
        </div>

        <div class="pc_none">

            <!-- 详情信息 phone -->
            <div class="phone_box_1 pc_none" v-show="supply_choice_1_num == 1">
                 
                <div class="phone_box_1_text" v-html="shopData.detail"></div>

            </div>

            <!-- 联系方式 phone -->
            <div class="phone_box_2 pc_none" v-show="supply_choice_1_num == 2">
                
                <div class="phone_box_2_text">

                    <div class="phone_box_2_li"><label class="phone_box_2_li_label">公司名称：</label> <span class="phone_box_2_li_text">{{ shopData.com }}</span></div>
                    <div class="phone_box_2_li"><label class="phone_box_2_li_label">电子邮箱：</label> <span class="phone_box_2_li_text">{{ shopData.email }}</span></div>
                    <div class="phone_box_2_li"><label class="phone_box_2_li_label">邮政编码：</label> <span class="phone_box_2_li_text">{{ shopData.postal }}</span></div>
                    <div class="phone_box_2_li"><label class="phone_box_2_li_label">详细地址：</label> <span class="phone_box_2_li_text">{{ shopData.address }}</span></div>
    
                </div>

            </div>
        </div> 
        <ShopHotNews></ShopHotNews>
    </main>
    <HomeFoot></HomeFoot>
</template>

<script setup>
//1.页面必备方法 start ---------------------------------------->
import { ref, onMounted } from 'vue'
import { ElRadio, ElRadioGroup } from 'element-plus'
//1.2选项卡 
const supply_choice_1_num = ref(1)
//1.3是否展示有效期
const getValidityTime = (shopData) => {
    if(shopData.islong==1){
        return "无期限"
    }else{
        if(shopData.validity){
            return shopData.validity.split(' ')[0];
        }
    }
}
//1.4 格式化字符串时间
const getTimeText = (time) => {
    if(time){
        return time.split(' ')[0];
    }else{
        return '';
    }
}
// 1.4应商品与求购商品的选项卡	
const choice_1_num = ref(1)
//1.页面必备方法 end ---------------------------------------->

//2.页面路径 start ---------------------------------------->
//2.1 获得页面数据id
const route = useRoute();
const router = useRouter()
let articleId = 0; //把路径转换为数据id
const name = ref('') //当前频道名称
const targetSegment = getRoutePath(2);//返回第二层的路径id
const targetRoute = getRoutePath(1);//返回第一层的路径id
const towgetRoute = targetRoute + "/" + targetSegment;

//通过导航路径反向查询导航id
const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
    method: 'GET',
    query: {
        'pinyin': towgetRoute,
    },
});
if(getRouteId.code == 200){
    articleId = getRouteId.data.category_id;
    name.value = getRouteId.data.alias;
}else{
    console.log("错误位置：获得页面路径")
}


//2.3 获得子栏目列表
const secondNav = ref([]);
const selectedSecondId = ref(route.query.catid);//当前选中了哪个子导航
let getSecondNav = async () => {
    const listData = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'placeid': 1,
            'pid': articleId,
            'num': 50,
        },
    });
    if (listData.code == 200) {
        secondNav.value = listData.data
    } else {
        console.log("错误位置：获得子级栏目列表")
    }
}
getSecondNav();

//2.4 获得cityid
const cityId = ref(route.query.cityid)
//2.页面路径 end ---------------------------------------->

//3.获得商品详情 start ---------------------------------------->
const shopId = ref(route.params.id) //获得商品的id
const shopData = ref({});
const shopImg = ref("")

let getShopData = async () => {
    const shopReq = await requestDataPromise('/web/getWebsiteshopInfo', {
        method: 'GET',
        query: {
            'id': parseFloat(shopId.value),
        },
    });

    if (shopReq.code == 200) {
        console.log(667788)
        console.log(shopReq)
        shopData.value = shopReq.data
        shopImg.value = shopReq.data.imgurl[0]
    } else {
        console.log("错误位置：获得商品详情")
    }
}
getShopData();

//获得右侧供应与求购的内容
const boxData1 = ref([]) //供应商品
const boxData2 = ref([]) //求购商品

//创建请求数据json
let getJson = [
    {"level":"5,0,6"},//供应商品
    {"level":"6,0,6"},//求购商品
]

let jsonString = JSON.stringify(getJson)

//获取所有数据
async function getPageAllData() {
    const mkdata = await requestDataPromise('/web/getWebsiteshop', {
        method: 'GET',
        query: {
            'catid': 346,
            'id': jsonString,
        },
    });

    if (mkdata.code == 200) {
        //供应商品
        boxData1.value = mkdata.data.goods[0];
        //求购商品
        boxData2.value = mkdata.data.goods[1];
    } else {
        ElMessage.error(mkdata.message)
    }
}
getPageAllData();
//3.获得商品详情 end  ---------------------------------------->

//5.广告 start ---------------------------------------->
//获得所有广告
let adImg1 = ref({})
onMounted(async () => {
    const { $webUrl, $CwebUrl } = useNuxtApp();
    //从客户端启动广告
    //广告1
    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_shopdetail_0001`
    const responseAd1 = await fetch(url, {
        headers: {
            'Content-Type': 'application/json',
            'Userurl': $CwebUrl,
            'Origin': $CwebUrl
        }
    });
    const resultAd1 = await responseAd1.json();
    adImg1.value = resultAd1.data[0];
})
//5.广告 end ---------------------------------------->

//6.设置seo信息 start---------------------------------------->
//6.1 设置seo信息
const setData = await requestDataPromise('/web/getWebsiteCategoryHead', {
    method: 'GET',
    query: {
        'catid': articleId
    },
});

if (setData.code == 200) {
    let seoTitle = shopData.value.name;
    let seoDescription = setData.data.seo_description;
    let seoKeywords = setData.data.seo_keywords;
    let seoSuffix = setData.data.suffix;
    let seoName = setData.data.website_name;

    useSeoMeta({
        title: seoTitle + "_" +  seoName + "_" + seoSuffix,
        meta: [
            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
            { name: 'viewport', content:"width=device-width,initial-scale=1,user-scalable=no"}

        ]
    });
} else {
    // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
    // console.log("错误位置：设置列表页面SEO数据")
    // console.log("后端错误反馈：", setData.message)
    // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
}
//6.设置seo信息 end---------------------------------------->
</script>
<style lang="less" scoped>
@import '@/assets/css/shop/detail.less';
</style>

<style lang="less" scoped>

 
    @media screen and (min-width:801px){/*pc*/
         
		
            .pc_none{display:none;}
    }
    @media screen and (max-width:800px){/*ipad_phone*/
 
            .index_main{width:100%;margin-bottom:0px;}
 
            .breadcrumb_box{

                 height:22px;width:100%;margin:10px auto;
                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
                width:92%;
                font-size:14px;
                color:#666;  
                
                *{
                    font-size:14px;
                     
                    display:inline ;
                    color:#666;  
                    line-height:22px;height:22px;
                    margin-right:5px;
                }

            }

            .supply_1_index{width:92%;margin:0px auto 0px;}
            .supply_1_img{width:auto;max-width:100%;height:302px;margin:0px auto 0px;float:none;display:block;border-radius:8px;}
            .supply_1_right{width:92%;margin:0px auto 0px;float:none;}
            .supply_1_h4{font-size:16px;line-height:26px;}

            .supply_1_title{font-size:14px;}
  
            .supply_1_li_qiugou .supply_1_li_label{line-height:18px;height:18px;font-size:14px;
                                min-width:auto;margin-right:8px;}   
            .supply_1_li_qiugou .supply_1_li_text{line-height:18px;height:18px;font-size:14px;flex:1;
                        
                        word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;

            }

            .supply_1_li_qiugou{ width:50%; box-sizing:border-box;float:left; }
            // .supply_1_li_qiugou:nth-of-type(1),.supply_1_li_qiugou:nth-of-type(1){margin-top:20px; }
             
             
            .supply_1_li_qiugou:nth-of-type(5){width:100%;}
            .supply_1_li_qiugou:nth-of-type(5) .supply_1_li_text{height:auto;
            
                
                        word-wrap: break-word;
                        overflow-wrap: break-word;
                        white-space: pre-wrap;
                        word-break: break-all;
            
            } 


            .supply_1_index_qiugou{display:block;width:100%;}
            .supply_1_index_qiugou_left{float:none;width:92%;margin:0px auto 0px;border:0px;padding-top:0px;}
            .supply_1_right_qiugou{float:none;width:100%;margin:12px auto 15px;}

            .supply_1_ul_qiugou{margin-top:0px;}

            .phone_box_1_head{
                    width:92%;margin:0px auto 0px;
                    height:50px;line-height:50px;
                    background:#fff;border-bottom:1px solid #E6E6E6;
                    
                    a{ 
                        float:left;height:50px;line-height:50px;margin:0;position:relative;
                        color:#333;font-size:15px; font-weight:bold;box-sizing:border-box;
                        position:relative;padding-left:30px;
                    }

                    a.a_choice_only{
                        color:#a91b33;
                    }

                    a:nth-child(1)::before{
                        content: '';display: block;
                        position:absolute;left:0px;top:18px;
                        background:#a91b33;
                        width:3px;height:14px;
                    }

                    a:nth-child(1){ 
                        padding-left:8px;
                    }
    
            }

            .phone_box_1{


                    width:92%;margin:0px auto 0px;    
                
                    .phone_box_1_text{ font-size:16px!important;line-height:26px!important;margin-top:15px!important; }
                    .phone_box_1_text *{ font-size:16px!important;line-height:26px!important;margin-top:15px!important; }

            }

            .phone_box_2{

                    width:92%;margin:0px auto 0px;    
                 
                    .phone_box_2_text{
                            margin-top:15px;
                            p{
                                display:block;font-size:16px;line-height:26px;margin-top:5px;
                             
                            }
                    }

                    .phone_box_2_li{
                        display:flex;margin-bottom:10px;
                    }
                    .phone_box_2_li_label{
                        line-height:24px;height:24px;font-size:16px;
                                 margin-right:8px;
                    }
                    .phone_box_2_li_text{
                        line-height:24px;font-size:16px;flex:1;
                        word-wrap: break-word;
                        overflow-wrap: break-word;
                        white-space: pre-wrap;
                        word-break: break-all;
                         
                    }

            }
 

            .phone_roll_out{
                overflow:hidden;
                width:92%;margin:0px auto 0px;
                .phone_roll_box{width:49%;box-sizing:border-box;border:solid 4px #A01C0E;border-radius:4px;
                             background:#A01C0E;}    
                .phone_roll_box:nth-of-type(odd){float:left;}    
                .phone_roll_box:nth-of-type(even){float:right;}    

                .phone_roll_head{height:33px;line-height:33px;color:#fff;font-size:16px;
                                    font-style:italic;text-indent:11px;}    
                .phone_roll_ul{overflow:hidden;background:#fff7ed;border-radius:4px;}    
                .phone_roll_li{width:44%;box-sizing:border-box; }    
                .phone_roll_li:nth-of-type(odd){float:left;margin-left:3%;}    
                .phone_roll_li:nth-of-type(even){float:right;margin-right:3%;}    

                .phone_roll_li_a{display:block;width:100%;height:100%;}    
                .phone_roll_li_img{display:block;width:100%;height:20vw;margin-top:2vw;}    

                .phone_roll_ul_li_dot1{height:5vw;line-height:5vw;color:#A01C0E;font-size:3vw;text-align:center;
                        margin:1vw 0;
                                   word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis; 
                }    

                /deep/.el-carousel__arrow--left{display:none;}
                /deep/.el-carousel__arrow--right{display:none;}

                 
                /deep/.el-carousel__indicators--outside button{width:3vw;height:3vw;border-radius:50%;background:#e98008;margin:0px 1vw;}
                /deep/.el-carousel__indicator.is-active button{background:#ffc62e;}

            }     



            .phone_none{display:none;}
    }


</style>